<template>
  <div class="loginHome">
        <div class="homeback">
            <h1 class="title">在线仓储订单管理</h1>
        </div>
        <div class="loginbox">
            <div class="login">
                <p class="logo">WZ</p>
                <p class="fs18">账号登录</p>
                <div>
                    <el-tabs v-model="select">
                        <el-tab-pane label="账号登录" name="first">
                            <div>
                                <el-input
                                    v-model="userId"
                                    class="login_input"
                                    placeholder="请输入账号"
                                    :prefix-icon="User"
                                />
                                <el-input
                                    v-model="password"
                                    class="login_input"
                                    type="password"
                                    placeholder="请输入密码"
                                    show-password
                                    :prefix-icon="Lock"
                                />
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="验证码登录" name="second">
                            <el-input
                                    v-model="phone"
                                    class="login_input"
                                    placeholder="请输入手机号"
                                    :prefix-icon="Cellphone"
                                />
                                <div class="codewrapper">
                                    <el-input
                                        v-model="code"
                                        class="code_input"
                                        placeholder="请输入验证码"
                                        :prefix-icon="Message"
                                    />
                                </div>
                                <el-button type="primary" class="getcode" :disabled="canGetCode">获取验证码</el-button>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <p class="tip"> 登录即表示您已阅读并同意<a href="" class="tipa">《用户协议》</a>和 <a href="" class="tipa">《客户隐私》</a></p>
                <p class="zc" @click="getAccount">立即注册</p>
                <el-button type="primary" class="login-btn" @click="toLogin" :disabled="canLogin">登录</el-button>
                <div>
                    <span>保存到桌面</span>
                    <span>忘记密码</span>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogzcVisible" title="注册账号" class="zhuceDialog">
            <el-form>
                <el-form-item label="输入账号:" >
                    <el-input v-model="newAccount.userId" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="输入密码:" >
                    <el-input v-model="newAccount.password" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item label="确认密码:" >
                    <el-input v-model="newAccount.password1" placeholder="请输入" ></el-input>
                </el-form-item>
                <el-form-item class="lastitem" label="请输入验证码:" >
                    <el-input v-model="newAccount.Captcha" placeholder="请输入" ></el-input>
                    <!-- <img class="get_verification" src="http://localhost:4000/user/captcha" alt="captcha" @click="getCaptcha" ref="captcha"> -->
                    <img class="get_verification" src="http://124.223.190.128:4000/user/captcha" alt="captcha" @click="getCaptcha" ref="captcha">
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogzcVisible = false">取消</el-button>
                    <el-button type="primary" @click="getAccountNow"
                    >立即注册</el-button
                    >
                </span>
            </template>
        </el-dialog>
  </div>
</template>

<script lang='ts'>
import { computed, onMounted, reactive, ref, watchEffect } from 'vue';
import { User, Lock,Cellphone,Message } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import router from '@/router'
import {successTip,errorTip,BASE_URL,isLogin} from '../utils/tools'
import axios from 'axios'
axios.defaults.withCredentials = true


export default {
    name:'LoginHome',
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    setup(){
        let store = useStore();
        watchEffect(
            ()=>{
                if(store.getters.getLoginState==1){
                    router.push('/home')
                }else{
                    router.push('/login')
                }
            }
        )
        let select=ref('first');
        let userId = ref('');
        let password = ref('');
        let phone = ref('');
        let code = ref('');
        let canLogin = computed(()=>{
                if((userId.value&&password.value)||(phone.value&&code.value)){
                    return false;
                }
                return true;
        })
        let canGetCode = computed(()=>{
                let phoneCodeVerification = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if(phone.value){
                    
                    return !phoneCodeVerification.test(phone.value);
                }
                return true;
        })
        //登录
        async  function toLogin(){
            try {
                const res = await axios.post(`${BASE_URL}/user/login`, {
                userId:userId.value,
                password:password.value
                })
                if(res.data.status==0){
                    store.dispatch('setLoginState',1)
                    store.dispatch('setToken',res.data.token)
                    store.dispatch('setUserId',userId.value)
                    localStorage.setItem('TOKEN', res.data.token);
                    successTip('登陆成功');
                }else{
                    errorTip(res.data.message);

                }
            } catch (error) {
                console.log(error)
            }
        }
        //注册
        let dialogzcVisible=ref(false)
        let newAccount=ref({userId:'',password:'',password1:'',Captcha:''})
        function getAccount(){
            dialogzcVisible.value = true
        }
        async function getAccountNow(){
            if(newAccount.value.password.length<6){
                errorTip('密码最少六位请重新输入')
                return
            }
            if(newAccount.value.password == newAccount.value.password1){
                try {
                    const res = await axios.post(`${BASE_URL}/user//getAccount`, {
                        userId:newAccount.value.userId,
                        password:newAccount.value.password,
                        captcha:newAccount.value.Captcha
                    })
                    if(res.data.status==0){
                        successTip('注册成功')
                    }else{
                        console.log(res.data)
                        errorTip(res.data.message)
                    }
                } catch (error) {
                    console.log(error)
                }
                newAccount.value = {userId:'',password:'',password1:'',Captcha:''};
                dialogzcVisible.value = false
            }else{
                errorTip('两次密码不同')
            }
        }
        onMounted(()=>{
            const token = localStorage.getItem('TOKEN');
            let res = isLogin(token as string)
            res.then(v=>{
                if(v.status==0){
                    store.dispatch('setLoginState',1)
                    store.dispatch('setToken',token)
                    store.dispatch('setUserId',v.userId)
                    router.push('/home')
                }
            },e=>{
                console.log(e)
            })
        })
        const captcha = ref<InstanceType<typeof HTMLImageElement>>()
        function getCaptcha () {
           if(captcha.value){
                // captcha.value.src = 'http://localhost:4000/user/captcha?time=' + Date.now()
                captcha.value.src = 'http://124.223.190.128:4000/user/captcha?time=' + Date.now()
           }
        }
        return{
            select,
            userId,
            password,
            code,
            phone,
            canLogin,
            User,Lock,Cellphone,Message,
            canGetCode,
            toLogin,
            dialogzcVisible,
            newAccount,
            getAccount,
            getAccountNow,
            getCaptcha,
            captcha
        }
    }
}  
</script>

<style lang="less" scoped>

    .loginHome{
        width: 100vw;
        height: 100vh;
        display: flex;
    }
    .loginHome .homeback{
        height: 100%;
        background: url(../../static/img/loginBackground.jpg) center no-repeat;
        background-size: cover;
        position: relative;
        flex-grow: 1;
    }
    .loginHome .homeback .title{
        font-size: 56px;
        font-weight: bold;
        font-family: "Microsoft YaHei";
        position: absolute;
        left: 50%;
        top: 20%;
        color: #fff;
        transform: translate(-50%,0);
    }
    .loginHome .loginbox{
        width: 481px;
        box-sizing: border-box;
        height: 100%;
        /* background:#DCDCDC; */
        /* background: rgb(45,55,57); */
        color: #fff;
        @media (max-width:980px) {
            width: 100vw;;
        }
    }
    .login{
        margin: 70px;
        position: relative;
        @media (max-width:980px) {
            margin:35px;
        }
    }
    .login .logo{
        font-size:20px;
        font-weight: bold;
        text-align: center;
        color: rgb(134,136,140);
    }
    .fs18{
        font-size: 18px;
        text-align: center;
        margin:80px 0 20px 0;
        color: black;
        font-weight: bold;
    }
    .login /deep/ .el-tabs__item{
        color: #808080;
        width: 50%;
        text-align: center;
        padding: 0;
    } 
    .login /deep/ .el-tabs__nav{
        width: 100%;
    }
    .login .tip{
        color: #808080;
        font-size: 12px;
    }
    .tip .tipa{
        color: cornflowerblue;
    }
    .zc{
        font-size: 12px;
        color: cornflowerblue;
        margin-top: 10px;
        cursor: pointer;
    }
    .login /deep/ input{
        height: 45px ;
        margin: 20px 0;
        width: 100%;
    }
    .code_input /deep/ input{
        width: 50%;
    }
    .login .codewrapper{
        position: relative;
    }
    .login .getcode{
        position: absolute;
        right: 0;
        bottom: 20px;
        width: 45%;
        height: 45px;
    }
    .login .login-btn{
        width: 100%;
        height: 45px;
        margin-top: 20px;
    }
    /deep/.el-form-item--default .el-form-item__label {
            line-height: 45px;
            margin-right: 30px;
        }
    /deep/.el-input__inner {
        height: 45px;
        width: 380px;
    }
    /deep/.el-dialog {
        --el-dialog-width: 35%;
    }
    /deep/.lastitem{
        .el-form-item__label {
            margin-right: 3px ;
        }
        .el-input__inner {
            width: 200px;
        }
    }
    @media (max-width:980px) {
        /deep/.el-dialog{
            width: 88%;
            .el-input__inner {
                height: 45px;
                width: 180pxpx;
            }
        }
    }
</style>